<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .tudou {
        width:400px;
        height: 200px;
        background: pink;
        margin: 30 auto;
        position: relative;
    }
    .tudou img {
        width: 100%;
        height: 100%;
    }
    .tudou .mask {
        position: absolute  ;
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4) url(https://img0.baidu.com/it/u=1193443590,3553329922&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=83625473994550984d8722a5a15e4e6c) no-repeat center;
        background-size: 20px 20px;
    }
    .tudou:hover .mask {
        display: block;
    }
</style>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="http://www.shudetang.com/template/conch/asset/img/load.gif" alt="">
    </div>
</body>
</html>